<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- React核心包 最先引入  提供一个对象React -->
  <script src="../../react资料_stu/依赖包/react.development.js"></script>
  <!-- ReactDOM包  提供一个对象ReactDOM -->
  <script src="../../react资料_stu/依赖包/react-dom.development.js"></script>
  <!-- babel -->
  <script src="../../react资料_stu/依赖包/babel.min.js"></script>
  <title>Document</title>
</head>

<body>
  <div id="app">

  </div>
</body>

<script type="text/babel">

  class Fn1 extends React.Component {

    //state 组件实列有一个state属性 当state属性发生改变 组件会重新执行render方法 根据diff算法 生成新的虚拟DOM 重新渲染
    state = {}

    constructor(name, age, id) {
      super(name, age)
      this.id = id
    }


    //在render中
    // this是组件实列
    //组件实列身上有一个state属性 当它发生改变 则 重新渲染
    render() {
      return (<div>

        <h1>我是组件实列</h1>
        {console.log(this)}
      </div>)
    }

  }
  //FN1 继承了React身上的方法属性
  //Fn1是一个函数
  //Fn1是一个函数 它有显示原型对象
  //  里面有一个render方法

  console.dir(Fn1);




  const root = ReactDOM.createRoot(document.getElementById('app'));
  root.render(<Fn1 />)



</script>


</html>